<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>uc动画</title>
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
	<meta name="format-detection" content="email=no,telephone=no">
	<style>
		body {
			background: #eee;
			font-family: 'Helvetica';
		}

		#container {
			height: 300px;
			background: #ccc;
			overflow: hidden;
			margin-top: 10px;
			position: relative;
		}

		#top {
			position: absolute;
			top: -100px;
			left: 0;
			height: 100px;
			width: 100%;
			background: #d9534f;
			transition: all 3s;
			z-index: 100;
		}

		#nav {
			background: #0077fa;
			height: 150px;
			transition: all 3s;
			position: absolute;
			z-index: 10;
			top: 0;
			width: 100%;
		}

		#container:hover #nav {
			-webkit-transform:scale(1,0.95);
			-webkit-transform:translateY(-150px);
			/*top: -150px;*/
		}

		#container:hover #content {
			/*-webkit-transform:scale(1,.4);*/
			-webkit-transform:translateY(-50px);
		}

		#container:hover #top {
			top: 0px;
		}

		#content {
			transition: all 2s;
			position: absolute;
			top: 150px;
			left: 0;
			width: 100%;
			height: 400px;
			background: #5cb85c;
			font-family: 'Microsoft yahei';
			font-size: 14px;
		}

		.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
		.btn-blue-on{background-color: #357AE8;}
		a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
		@media screen and (max-width: 360px) {
			#content {
				font-size: 20px;
				font-weight: bold;
				font-family: 'Microsoft yahei';
			}
		}

		
		
	</style>
	<script src="framework/jquery-1.10.2.min.js"></script>
	<script>
		$(function(){
			console.log("init");

			

			
		});
	</script>
</head>
<body>
	<button id="doAnimation">do Animation</button>
	<div id="container">
		<div id="top">TOP</div>
		<div id="nav">aaa</div>
		<div id="content">
			最佳答案: sublime 作为轻量级编辑器,本身是没有代码库的,换句话说…它里面并没有预存大量代码! 当然sublime3开始有了附加库的功能,但是既然用了轻量级编辑器,那么...
		</div>
	</div>
	<div class="btn-blue">按钮</div>
	<script>
			var btnBlue = document.querySelector(".btn-blue");
			console.log(btnBlue.ontouchstart);
			btnBlue.ontouchstart = function(){
			    this.className = "btn-blue btn-blue-on";
			    console.log("on touch start")
			}
			btnBlue.ontouchend = function(){
			    this.className = "btn-blue"
			    console.log("on touch end");
			}
	</script>
</body>
</html>